<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-pink" :isBack="false">
				<block slot="content">隐患整改意见书</block>
				<view slot="right" style="margin-left: 15px;" @tap="gohome">主页</view>
			</cu-custom>
			<view class="secondContent">
				<view class="h6">{{formData.placeName}}</view>
				<view class="ul">
					<view class="li animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
						场所地址：<span>{{formData.address}}</span></view>
					<view class="li animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
						场所编码：<span>{{formData.schoolCode}}</span></view>
					<view class="li animation-slide-bottom" :style="[{animationDelay: '0.3s'}]">隐患数量：<span
							style="margin-right: 10px;">{{formData.checkNum}},</span>已整改：<span>{{formData.rectifyNum}}</span>
					</view>
					<!-- <view class="li animation-slide-bottom" :style="[{animationDelay: '0.5s'}]"></view> -->
					
					<view class="li animation-slide-bottom" :style="[{animationDelay: '0.4s'}]">
						排查员：<span>{{formData.checkBy == null ? '' : formData.checkBy}}</span></view>
				</view>
			</view>
			<view class="qianphoto" v-if="formData.principalSign == null || formData.principalSign == ''">
				<view class="h6">场所负责人签名：</view>
				<view class="h5" @click="openQm">
					签名照片</view>
				<view class="qmyphoto" v-if="formData.principalSign != null && formData.principalSign != ''">
					<image mode="widthFix" :src="formData.principalSign"></image>
				</view>
				<autograph @getImg="getImg" @colse="colse" v-show="isShow" ref="QM" class="QMstyle"></autograph>
			</view>
			<view class="qingkuan">
				<view class="one">

					<view class="detaliy">
						<view class="h6">隐患清单[{{dangerSize}}条]</view>
						<view class="listdetail">
							<view class="li animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.05 + 's'}]"
								v-for="(item,index) in formlist" @click="compCheck(item)">
								<view class="listtop margin-bottom">
									<span>{{item.createBy}}</span>
									<span>{{item.createTime}}</span>
								</view>

								<text class="margin-bottom">{{item.dangerDesc}}</text>
								<view class="middle_img">
									<view class="Colt_center_middleImg" v-for="(items,i) in item.photoList" :key="i">
										<view class="img_wapBox">
											<image class="imag" :src="items.url" mode="aspectFill"
												@click.stop="photoPreview(item.photoList,i)"></image>
										</view>
									</view>
								</view>
								<!-- 	<view class="imglist ">
									<image :src="items.url" mode="aspectFill" v-for="(items,i) in item.photoList"
										:key="i"></image>
								</view> -->
								<view class="label margin-bottom">{{item.detailDesc == null ? '' : item.detailDesc}}</view>
								<view class="listbottom margin-bottom">
									<view class="jibie">{{item.level}}级</view>
									<view class="zheng">{{item.status == 0 ? '未整改' : '已整改'}}</view>
								</view>

							</view>
						</view>
					</view>
					<view class="miniQrbox" v-if="formData.miniQr != null && formData.miniQr != ''">
						<view class="span">
							<view class="title">说明：</view>
							<view class="ul">
								1、点击签收后方可查看详细隐患清单信息。
							</view>
							<view class="ul">
								2、请在收到此意见书后立即依据国家法律法规及相关消防规范
								标准完成全部整改，并于7个自然日内整改完毕，整改期间要采
								取有效的安全保护措施，确保安全。
							</view>
							<view class="ul">
								3、请保存好下方的二维码，下次可扫描识别下方二维码查看隐
								患告知书信息，并提交整改图片（无需账号、密码）
							</view>
							<view class="ul">
								4、您提交的整改图片会有技术人员进行审核确认。请不要上传
								与隐患整改无关的图片，如果您提交的整改图片审核不通过，
								需24小时后才可重新上传。如果对审核结果有疑问，可联系隐
								患告知书所展示的排查员咨询
							</view>

						</view>
						<image class="miniQr" @click="remPreview(formData.miniQr)" mode="widthFix"
							:src="formData.miniQr"></image>
					</view>
				</view>
			</view>

			<!-- 完成复查弹框 -->
			<uni-popup ref="bottompopup" type="bottom" :mask-click="true">
				<view class="scortop">
					<view class="title">隐患整改</view>
					<uni-icons type="close" size="30" @click="compclose"></uni-icons>
				</view>
				<view class="scrollbox">
					<view class="titlecontent">
						<view class="ul">
							<view class="h6">隐患描述</view>
							<view class="font">
								{{propsFormlist.dangerDesc}}
							</view>
						</view>
						<view class="ul">
							<view class="h6">整改建议</view>
							<view class="font">
								{{propsFormlist.advise}}
							</view>
						</view>
						<view class="ul">
							<view class="h6">隐患图片</view>
							<view class="middle_img">
								<view class="Colt_center_middleImg" v-for="(items,i) in propsFormlist.photoList"
									:key="i">
									<view class="img_wapBox">
										<image class="imag" :src="items.url" mode="aspectFill"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="ul">
							<view class="h6">整改图片上传</view>
							<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="qinselect"
								@progress="progress" @delete="qindeLete" @success="success" @fail="fail" />
						</view>

						<view class="ul">
							<view class="h6">备注</view>
							<view class="font">
								<textarea maxlength="140" v-model="propsFormlist.remark"
									placeholder="如有其他补充说明,可在此处填写" />
							</view>
						</view>

						<view class="padding flex flex-direction">
							<button class="cu-btn bg-blue lg shadow" @click="photoAdd">提交</button>
						</view>
					</view>
				</view>
			</uni-popup>

		</scroll-view>
	</view>

</template>

<script>
	import {
		ACCESS_TOKEN
	} from '@/common/util/constants.js'
	import appSelect from '@/components/my-componets/appSelect.vue'
	import searchinput from '../component/searchinput.vue'
	import autograph from '../component/autograph.vue'
	import server from '@/api/server.js'
	import configService from '@/common/service/config.service.js'
	export default {
		components: {
			searchinput,
			autograph
		},
		data() {
			return {
				codeImg: '',
				isShow: false,
				qmsrc: '',
				qmclose: false,
				items: ['隐患排查情况', '工作照片（签名）'],
				dangerStr: [],
				wordData: {},
				modalName: null,
				imageValue: [],
				myFormData: [],
				getid: null,
				// 表单数据
				formData: {},
				formlist: [],
				dangerSize: 0,
				getid: null,
				propsFormlist: [],
				dangerDesc: '',
			}
		},
		onShareAppMessage: function(res) {
			// return eventHandler接收到的分享参数
			return {
				title: '隐患排查！', // 分享名称
				path: '/pages/education/detaillist?scene=' + this.getid, // 这里写你这个页面的路径
				success: function(shareTickets) {
					console.log(shareTickets + '成功', this.getid);
					// 转发成功
				},
				fail: function(res) {
					console.log(res + '失败');
					// 转发失败
				},
				complete: function(res) {
					// 不管成功失败都会执行
				}
			};
		},
		onLoad(options) {
			//options可以接到index 传过来的值
			console.log(options,'999999999999999999999999')
			if(options != undefined ){
				console.log('888888888888899999999999')
				this.getid = options.scene
				this.getcheckqueryById(this.getid)
			}else{
				console.log('66666666667')
				var pages = getCurrentPages();
				var page = pages[pages.length - 1];
				// this.getid = page.options.scene
				this.getid = page
				console.log('opt', page);
				this.getcheckqueryById(this.getid)
				
			}
		},

		methods: {

			gohome() {
				uni.navigateTo({
					// ? 后面加要传的参数， 多个参数用 & 隔开 
					url: '/pages/index/index'
				})
			},
			//图片预览
			photoPreview(data, index) {
				console.log(data)
				let photoList = data.map(item => {
					return item.url;
				});
				console.log(photoList)
				uni.previewImage({
					current: index,
					urls: photoList
				});
			},
			//二维码单张放大
			remPreview(photoImg) {
				let imgsArray = [];
				imgsArray[0] = photoImg;
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},

			//打印
			print() {
				server.placeexport({
					id: this.$root.$mp.query.id
				}).then(res => {
					console.log(res)
					let base64 = wx.arrayBufferToBase64(res.data);
					let filePath = wx.env.USER_DATA_PATH + '/yihuyidang.doc'
					console.log(filePath)
					const fileManager = wx.getFileSystemManager()
					fileManager.writeFile({
						filePath: filePath,
						data: base64,
						encoding: 'base64',
						success: function() {
							console.log(filePath, '111111111111111111')
							uni.openDocument({
								filePath: filePath,
								success: (e) => {
									uni.showToast({
										title: `打开成功`
									})
								},
								fail: (e) => {
									uni.showToast({
										title: `打开失败` + e
									})
								}
							})
						},
						fail: (e) => {
							uni.showToast({
								title: `进入失败` + e
							})
						}
					})
				})

			},
			// 弹出签名
			openQm() {
				this.isShow = true;
			},
			//签名回调图片
			getImg(e) {
				this.qmsrc = e;
				this.isShow = false;
				this.qmclose = true;
				console.log(e)
				let object = {
					id: this.getid,
					principalSign: e,
				}
				server.schoolcheckedit(object).then(res => {
					console.log(res)
					this.getcheckqueryById(this.getid)
				})
			},
			getcheckqueryById(getid) {
				let baseURL = configService.apiUrl
				console.log(baseURL)
				
				server.schoolcheckqueryById({
					id: getid
				}).then(res => {
					console.log(res,'测试测试hi是hi是哈333333')
					this.formData = res.data.result
					this.search()
				
				})
			

			},
			colse(e) {
				this.isShow = e;
			},
			//清除
			delImg() {
				uni.showToast({
					icon: 'none',
					duration: '3000',
					title: '签名已删除'
				})
				this.qmsrc = '';
				this.qmclose = false;
			},
			photoAdd() {
				// let photoList = []
				// this.myFormData.forEach(function(item) {
				// 	let obj = {}
				// 	obj.url = item
				// 	obj.type = 1
				// 	photoList.push(obj)
				// })
				// console.log(photoList)
				let object = {
					checkDangerId: this.propsFormlist.id,
					operationType: 'rectify',
					remark: this.propsFormlist.remark,
					photoList: this.myFormData,
				}
				server.schoolflowadd(object).then(res => {
					console.log(res)
					this.myFormData = []
					this.imageValue = []
					if (res.data.success) {
						this.$refs.bottompopup.close()
						this.getcheckqueryById(this.getid)
						this.$tip.success(res.data.message)
					}else{
						this.$tip.error(res.data.message)
					}
				})
			},
			//删除图片
			qindeLete(e) {
				console.log(e)
				if(this.myFormData.length>0){
					var index = -1
					this.myFormData.forEach((item,i)=>{
						if(e.tempFilePath == item.path){
							index=i
						}
					})
					if(index > -1){
						this.myFormData.splice(index,1)
					}
				}
				server.schoolphotodelete(e.tempFile.name).then(res => {
					this.$nextTick(function() {
						console.log(res)
					});
			
				})
			},
			// 获取上传状态
			qinselect(e) {
				var that = this
				console.log(this.imageValue)
				var tempFilePaths = []
				tempFilePaths = e.tempFilePaths
				tempFilePaths.forEach(function(item) {
					that.$http.upload(that.$config.apiUrl + '/sys/common/upload?biz=school', {
							filePath: item,
							name: 'file'
						})
						.then(res => {
							console.log(that.myFormData)
							let obj = {
								url: res.data.message
							}
							if (res.data.success) {
								that.myFormData.push(obj)
								that.$tip.success('上传成功！')
							} else {
								that.$tip.error('上传失败！')
							}

						})
						.catch(err => {
							that.$tip.error(err.data.message)
						});
				})


			},
			//完成复查
			compclose() {
				this.$refs.bottompopup.close()
			},
			compCheck(item) {
				this.propsFormlist = item
				this.$refs.bottompopup.open('top')

			},
			//删除图片
			deLete(e) {
				console.log(e)
				server.dangerphoto(e.tempFile.name).then(res => {
					this.$nextTick(function() {
						console.log(res)
					});

				})
			},
			search() {
				server.schoollistByCheck({
					checkId: this.getid,
					dangerDesc: this.dangerDesc
				}).then(res => {
					console.log(res)
					this.formlist = res.data.result
					this.dangerSize = this.formlist.length
					// if (res.data.result.dangerStr.length > 0) {
					// 	res.data.result.dangerStr.forEach(item => {
					// 		this.dangerStr.push({
					// 			text: item,
					// 			class: 'unselect'
					// 		})
					// 	})
					// }
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.uni-searchbar {
		background: white;
	}

	.content {
		padding: 10px 0;
		margin-bottom: 10px;
		background: red;
		color: white;
		float: left;
		width: 100%;

		.top {
			display: flex;
			justify-content: space-around
		}
	}



	.top span:nth-child(1) {
		padding: 0px 6px;
		border: 1px solid white;
		border-radius: 30px;
		font-size: 12px;

	}

	.top /deep/uni-button,
	.top /deep/button {
		font-size: 12px;
		padding: 0;
		margin: 0;
		line-height: 20px;
		background-color: unset;
		color: white;
	}

	.top /deep/uni-button::after,
	.top /deep/button::after {
		border: none;
		background-color: none;
	}

	.meid {
		font-size: 28px;
		font-weight: bold;
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: center;

		span {
			border-bottom: 1px solid white;
			padding-bottom: 10px;
		}
	}

	.bottom {
		float: left;
		width: 100%;

		.span {
			text-align: center;
			float: left;
			width: 33.33%;
			font-size: 18px;

			.text {
				display: block;
			}
		}
	}

	.secondContent {
		background: white;
		padding: 10px 0;

		.h6 {
			font-size: 16px;
			color: blue;
			padding: 0 10px 0 10px;
		}

		.ul {
			padding: 0 10px;
			font-size: 15px;

			.li {
				font-size: 15px;
				margin-top: 10px;
				display: flex;
				align-items: center;

				span {
					margin-left: 10px;

					/deep/.cu-form-group .title {
						display: none;
					}
				}
			}
		}
	}

	.chosecard {
		background: white;
	}

	.qingkuan {
		.select {
			border: 1px solid red;
			color: red !important;
		}

		.unselect {
			color: black !important;
		}

		.one {
			float: left;
			width: 100%;

			.label {
				float: left;
			}
		}

		.label {
			span {
				padding: 6px 10px;
				color: black;
				background: #efc5c5;
				border-radius: 30px;
				margin-right: 10px;
				float: left;
				margin: 5px;
			}
		}
	}

	.detaliy {
		.h6 {
			float: left;
			width: 100%;
			background: white;
			padding: 10px 0 10px 10px;
		}
	}

	.listdetail {
		float: left;
		padding-top: 5px;
		background: #f1f1f1;
		display: flex;
		flex-direction: column;
		.li {
			float: left;
			padding: 10px 5px;
			background: white;
			margin-bottom: 10px;
			margin: 0 5px 5px 5px;
			border-radius: 10px;

			.listtop {
				width: 100%;
				color: #969292;
				float: left;

				span:nth-child(2) {
					float: right;
				}
			}

			text {
				font-size: 15px;
			}

			uni-image {
				float: left;
				width: 124px;
				height: 80px;
				margin-right: 5px;
			}

			image {
				float: left;
				width: 124px;
				height: 80px;
				margin-right: 5px;
			}

			.label {
				font-size: 15px;
				color: #999;
			}

			.listbottom {
				.jibie {
					float: left;
				}

				.jibie,
				.zheng {
					border: 1px solid red;
					padding: 3px 8px;
					border-radius: 30px;
					color: red;
				}

				.zheng {
					float: right;
				}
			}
		}
	}

	.margin-bottom {
		margin-bottom: 10px;
		float: left;
		width: 100%;
	}

	.fixedbottm {
		display: flex;
		padding: 10px 0;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: white;

		.one {
			display: flex;
			justify-content: space-around;
			width: 40%;
			float: left;

			.label {
				float: left;
				width: 100%;
				padding: 5px;

			}

			.left {
				text-align: center;

				image {
					width: 25px;
					height: 25px;
				}

				uni-image {
					width: 25px;
					height: 25px;
				}

				.span {
					width: 100%;
					float: left;
				}
			}
		}

		.two {
			width: 60%;
			float: left;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			justify-content: space-evenly;

			.span {
				padding: 8px 9px;

				border-radius: 30px;
			}

			.span:nth-child(1) {
				background: blue;
			}

			.span:nth-child(2) {
				background: red;
			}
		}

		.three {
			width: 45%;
			float: left;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			justify-content: space-evenly;

			.span {
				padding: 8px 9px;

				border-radius: 30px;
			}

			.span:nth-child(1) {
				background: #f1b401;
				width: 100%;
				text-align: center;
			}
		}
	}

	.page,
	scroll-view {
		padding-bottom: 100px;
	}

	.qianphoto {
		padding: 10px;
		text-align: center;
		float: left;
		width: 100%;

		.qmyphoto {
			height: 200px;
			margin-bottom: 10px;
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: center;

			uni-image,
			image {
				width: 150px;
				transform: rotate(-90deg);
				margin-bottom: 20px;
			}

		}

		.h6,
		.name {
			color: #999;
			font-size: 16px;
			margin-bottom: 20px;
			text-align: left;
		}

		.h5 {
			margin-bottom: 10px;
			font-size: 16px;
			color: blue;
		}


		.fuchaPhot {
			.h6 {
				color: #999;
				font-size: 14px;
				margin-bottom: 20px;
				float: left;
				width: 100%;
				text-align: left;
			}
		}
	}

	.compenlist {
		.li {
			background: white;
			border-radius: 15px;
			padding: 10px;
			float: left;
			width: 100%;

			.top {
				display: flex;
				justify-content: space-between;
				font-size: 18px;
				margin-bottom: 20px;

				.h6 {
					color: #007aff;
				}

				.h5 {
					color: #d372f1;
				}
			}

			.h3 {
				font-size: 16px;

				.midle {
					display: flex;
					align-items: center;
					margin-bottom: 10px;

					uni-image,
					image {
						width: 40px;
						height: 40px;
						border-radius: 30px;
						margin-right: 10px;
					}
				}

			}

			.bottom {
				display: flex;
				justify-content: space-between;
				font-size: 16px;
				color: #999;
				margin: 15px 0;
			}

			.imgcontent {
				width: 100%;
				display: block;

				uni-image,
				image {
					width: 85px;
					height: 85px;
				}
			}

			.h2 {
				margin-bottom: 10px;
				text-align: center;
				font-size: 18px;
				color: #007aff;
			}

			.h1 {
				text-align: center;
				border: 1px solid #666;
				padding: 8px 10px;
				width: 120px;
				border-radius: 30px;
				margin: 20px auto 0;
				display: inline-block;
				width: 100%;
			}
		}
	}

	.compenlist,
	.fzrphoto {
		/deep/.file-picker__box {
			width: 135px !important;
			height: 40px !important;
			padding-top: unset;
			text-align: center;
			padding: 8px 10px;
			width: 120px;
			border-radius: 30px;
			margin: 0 auto 0;
			border: unset !important;
			font-size: 18px;
			color: #007aff;

			.is-add {
				border-color: unset !important;
				border: unset !important;
			}
		}
	}



	//底部弹出框
	/deep/.uni-transition {
		background: white;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		overflow: hidden;

		.scrollbox {
			height: 500px;
			float: left;
			overflow: auto;
		}

		.scortop {
			padding: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 18px;
			font-weight: bold;
			width: 100%;
		}
	}

	// 签名
	.textBox {
		width: 80%;
		padding: 20px;
		margin: 0 auto;
		margin-top: 50px;

		.name {
			float: left;
			height: 30px;
			line-height: 30px;
		}

		.show {
			width: 40%;
			height: 40px;
			float: left;
			margin-top: -10px;
			border-bottom: 1px solid #333;
			position: relative;

			.img {
				width: 40px;
				height: 123px;
				transform: rotate(-90deg);
				position: absolute;
				top: -48px;
				left: 38px;
				// image-rendering:-moz-crisp-edges;
				// image-rendering:-o-crisp-edges;
				// image-rendering:-webkit-optimize-contrast;
				// image-rendering: crisp-edges;
				// -ms-interpolation-mode:nearest-neighbor;
			}
		}

		.iconfont {
			float: left;
			font-size: 24px;
			margin-top: 4px;
			color: #3967FF;
			margin-left: 10px;
		}
	}

	.QMstyle {
		position: fixed;
		z-index: 99999;
		top: 0;
		left: 0;
	}

	/deep/.cu-form-group uni-picker::after {
		display: none !important;
	}

	/deep/.bg-gradual-pink {
		background-image: linear-gradient(45deg, #ff0000, #cc1c1c);
	}

	.qianphotobox {
		text-align: center;
		font-size: 18px;
		color: red;
		margin-top: 20px;
	}

	.titlecontent .ul {
		float: left;
		width: 100%;
		margin-bottom: 20px;

		textarea {
			float: left;
			width: 100%;
			border: 1px #eee solid;
			padding: 10px;
			border-radius: 10px;
		}
	}

	.miniQrbox {
		float: left;
		width: 100%;
		font-size: 13px;
		color: #999;
		margin-top: 20px;

		.title {
			margin-bottom: 15px;
		}

		.ul {
			line-height: 22px;
		}

		.miniQr {
			width: 100%;
			padding: 10px;
		}
	}
</style>
